<template>
    <div>
         <Card style="width:100%;position:relative;">
            <p slot="title" style="color:#2d8cf0;">{{tsname}}</p>
            <Form :label-width="100">
                <FormItem label="选择设备编组：">
                    <CheckboxGroup v-model="targetselect" @on-change="changeselectGroup">
                        <Checkbox v-for="(item,key) in data" :label="item.label" :key="key"></Checkbox>
                    </CheckboxGroup>
                </FormItem>
                <FormItem label="选择设备类型：">
                    <Select v-model="devtypeindex" style="width:200px;">
                        <Option v-for="(item,key) in typelist" :value="item.key" :key="key">{{ item.label }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="选择日期：">
                    <DatePicker type="date" format="yyyy-MM-dd" v-model="selectdate" placeholder="选择日期" style="width: 200px;" @on-change="datechange"></DatePicker>
                </FormItem>
            </Form>
            <div style="width:100%;">
                <div id="historyChart"></div>
            </div>
        </Card>
    </div>
</template>
<script>
import util from '../../util/util'
export default {
    data(){
        return {
            tsname:'',
            selectdate:'',
            devtypeindex:1,
            tsimg:'../../static/timg.jpg',
            myChart:Object,
            title:'编组详情',
            legend:['电压互感器01','断路器01','电缆出线气室01'],
            xAxis:['2018-6-14','2018-6-15','2018-6-16','2018-6-17','2018-6-18'],
            datamap:{'电压互感器01':['40','30','45','66','66'],'断路器01':['21','33','41','66','66'],'电缆出线气室01':['11','22','44','66','66']},
            data: [],
            listStyle: {
                width: '200px',
                height: '300px',
                marginBottom:'30px'
            },
            targetKeys: [],
            targetselect:[],
            typelist:[]
        }
    },
    created(){
        this.xAxis = this.timeForMat();
        this.selectdate = new Date().getFullYear()+'-'+(new Date().getMonth()+1) +'-'+new Date().getDate();
        if(typeof(this.$store.state.DevclickItem)=='undefined'){
            this.$router.go(-1);
            return false;
        }
        this.tsname = this.$store.state.DevclickItem.name;
        this.get_Ts_Type_Group(this.$store.state.DevclickItem.name);
    },
    mounted(){
        this.$nextTick(()=>{
            this.getChartData([1,2],2,'2018-07-06');
            this.initChart('historyChart');
        });
    },
    methods:{
        datechange:function(date){
            if(this.myChart) this.myChart.clear();
            this.getChartData(this.targetKeys,this.devtypeindex,date);
        },
        getChartData:function(grouplist,typeindex,date){
            let vm = this;
            let group_index = '';
            for(let i = 0;i<grouplist.length;i++){
                group_index += '&group_index='+grouplist[i];
            }
            util.ajax({
                method: 'get',
                url: '/api-record/group_type_compare?date='+date+'&type_index='+typeindex+group_index
            })
            .then(function (response) {
                if(response.status==200){
                    let xais = response.data.x_series;
                    let legend = [];
                    let data = {};
                    let typelabel = '';
                    for(let i = 0;i<response.data.y_series.length;i++){
                        legend.push(response.data.y_series[i].name);
                        data[response.data.y_series[i].name] = response.data.y_series[i].data
                    }
                    for(let i = 0;i<vm.typelist.length;i++){
                        if(typeindex==vm.typelist[i].key){
                            typelabel = vm.typelist[i].label;
                        }
                    }
                    let title = date + ' ' +vm.targetselect[0] + '等编组下' + typelabel + '设备温度信息';
                    vm.initChart('historyChart',legend,xais,data,response.data.env,title);
                }
            })
            .catch(function(err){
                vm.$Message.info(err.response.data.detail);
            })
        },
        get_Ts_Type_Group:function(tsname){
            let vm = this;
            util.ajax({
                method: 'get',
                url: '/util-api-sgdlist/?tsname='+tsname
            })
            .then(function (response) {
                if(response.status==200){
                    vm.data = [];
                    vm.targetKeys = [];
                    let devtypelist = [];
                    let devtypetarget = [];
                    for(let i = 0;i<response.data.device_group.length;i++){
                        let item = {
                            key: response.data.device_group[i].id,
                            label: response.data.device_group[i].name
                        };
                        vm.data.push(item);
                        vm.targetKeys.push(response.data.device_group[i].id);
                        vm.targetselect.push(response.data.device_group[i].name);
                    }
                    for(let i = 0;i<response.data.device_type.length;i++){
                        let item = {
                            key: response.data.device_type[i].id,
                            label: response.data.device_type[i].name
                        }
                        devtypelist.push(item);
                    }
                    vm.typelist=devtypelist;
                    if(devtypelist.length>0) vm.devtypeindex = devtypelist[0].key;
                }
            })
            .catch(function(err){
                console.log(err.response)
            })
        },
        initChart:function(id,legend,xAxis,data,env,title){
            //let echarts = require('echarts');
            let echarts = require('echarts/lib/echarts');
            // 引入柱状图
            require('echarts/lib/chart/bar');
            require('echarts/lib/chart/line');
            require("echarts/lib/component/grid");
            require("echarts/lib/component/title");
            require("echarts/lib/component/markPoint");

            // 引入提示框和标题组件
            require('echarts/lib/component/tooltip');
            require('echarts/lib/component/title');
            require('echarts/lib/component/toolbox');
            require("echarts/lib/component/dataZoom");
            this.myChart = echarts.init(document.getElementById(id));
            let serieslist = [];
            let legdd = [];
            for(let i in data){
                let item = {
                    name:i,
                    type:'line',
                    data:data[i],
                    smooth:true
                }
                serieslist.push(item);
                legdd.push(i);
            }
            if(env){
                let envitem = {
                    name:env.name,
                    type:'line',
                    data:env.data,
                    smooth:true
                };
                serieslist.push(envitem);
            }
            let option = {
                title: {
                    text: title,
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    show:true,
                    data:legdd,
                    top:30,
                    right:'center',
                },
                toolbox: {
                    feature: {
                        magicType: {
                            type: ['line', 'bar']
                        }
                    }
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: true,
                    data: xAxis
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value} °C'
                    }
                },
                dataZoom: [
                    {
                        show: true,
                        realtime: true,
                        start: 0,
                        end: 70
                    },
                    {
                        type: 'inside',
                        realtime: true,
                        start: 0,
                        end: 70
                    }
                ],
                series: serieslist
            }
            this.myChart.setOption(option);
            window.addEventListener('resize',() => {
                this.myChart.resize();
            })
        },
        changeselectGroup:function(list){
            this.targetKeys=[];
            for(let i = 0;i<list.length;i++){
                for(let j in this.data){
                    if(list[i] == this.data[j].label){
                        this.targetKeys.push(this.data[j].key);
                    }
                }
            }
        },
        timeForMat:function(count) {
            let result = [];
            let now = new Date();
            Date.prototype.getMonthDay = function(){
                return (this.getMonth() + 1) + '-' + this.getDate();
            }
            result.push(now.getMonthDay());
            for(var i = 0 ; i < 29 ; i ++){
                now.setDate(now.getDate() - 1);
                result.push(now.getMonthDay())
            }
            return result;
        }
    },
    watch:{
        devtypeindex:function(newval){
            let year = new Date(this.selectdate).getFullYear();
            let month = new Date(this.selectdate).getMonth()+1;
            let date = new Date(this.selectdate).getDate();
            let dateselect = year+'-'+month+'-'+date;
            if(this.myChart) this.myChart.clear();
            this.getChartData(this.targetKeys,newval,dateselect);
        },
        targetKeys:function(newval){
            this.targetKeys = newval;
            let year = new Date(this.selectdate).getFullYear();
            let month = new Date(this.selectdate).getMonth()+1;
            let date = new Date(this.selectdate).getDate();
            let dateselect = year+'-'+month+'-'+date;
            if(this.myChart) this.myChart.clear();
            this.getChartData(this.targetKeys,this.devtypeindex,dateselect);
        }
    }
}
</script>
<style scoped>
    .ivu-form .ivu-form-item-label{
        font-size: 16px;
    }
    #historyChart{
        width: 100%;
        height: 500px;
    }
</style>
